extends ../layout
block head
  meta(charset="utf-8")
  title Dashboard - Bootstrap Admin
  meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
  meta(name="apple-mobile-web-app-capable", content="yes")

  link(href="/components/css/bootstrap.min.css", rel="stylesheet")
  link(href="/components/css/bootstrap-responsive.min.css", rel="stylesheet")
  link(href="/components/css/font-awesome.css", rel="stylesheet")
  link(href="/components/css/adminia.css", rel="stylesheet")
  link(href="/components/css/adminia-responsive.css", rel="stylesheet")
  link(href="/components/css/pages/dashboard.css", rel="stylesheet")

  // dropzone css
  link(href="/css/dropzone.css", rel="stylesheet")

  // custom css
  link(href="/css/custom.css",rel="stylesheet")


  // Le HTML5 shim, for IE6-8 support of HTML5 elements
  //if lt IE 9
    script(src="http://html5shim.googlecode.com/svn/trunk/html5.js")
  meta(http-equiv="Content-Type", content="text/html; charset=utf-8")
block body
  include ../navbar.jade
  #content
    .container
      .row
        include ../nav.jade
        .span9
          h1.page-title
            i.icon-home
            |           Dashboard
          .widget-content
            button#deleteall.btn.btn-primary.btn-xs(type="button",style="float:right") 删除所有
            h3 所有文件列表
            table.table.table-striped.table-bordered.table-hover.definewidth.m10
              thead
                tr
                  th ID

                  th 文件名

                  th 文件大小(Byte)

                  th 最近操作时间

                  th 删除管理

                  th 下载管理
              tbody(id="filelist_tr")
                tr(v-for="(item, index) in fileslist")
                  td {{index+1}}

                  td(v-if="item.isDir")
                    a(href="javascript:void(0)" v-on:click="showFiles(item.file_path)") {{item.file_name}}
                  td(v-else) {{item.file_name}}

                  td {{item.file_size}}
                  td {{item.file_latest_ch}}
                  td
                    a(href="javascript:void(0)" v-on:click="deleteFile(item.file_name)") 点击删除
                  td
                    a(href="javascript:void(0)" v-on:click="downloadFile(item.file_name)") 点击下载
                tr(v-if="isRoot")
                  td
                    a(href="javascript:void(0)" v-on:click="showLastPage()") 上一页






          .widget-content
            h3 表单上传
            form#foo(action="/upload.html", method="post",enctype="multipart/form-data")
              ul
                li
                  input(type="file",name="file",multiple="multiple")
                li
                  input(type="submit",value="提交")
          // /widget

          .widget-content
            h3 拖拽上传
            #dropz.dropzone
          // /widget


        // /span9
      // /rowy

    // /container
  // /content

  include ../gotop.jade
  include ../footer.jade

  script(src="/components/js/jquery-1.7.2.min.js")
  script(src="/components/js/bootstrap.js")
  script(src="/js/dropzone.min.js")
  script(src="/js/vue.min.js")

  // custom.js
  script(src="/js/custom.js")

  script.
    $(function () {
      var myvue = new Vue({
        el: '#filelist_tr',
        data: {
          fileslist: !{file_info},
          genPath: !{gen_path},
          isRoot : !{is_root},
        },
        methods: {
          deleteFile: function (file_name) {
            // body...
            $.post('/delete.html', {file_name: file_name}, function (fileslist) {
              // body...
              myvue.fileslist = fileslist;
            })

          },
          downloadFile: function (file_name) {
            // body...
            location.href = `/download.html?file_name=${file_name}`;
          },

          showFiles: function (file_path) {
            console.log(file_path)
            // location.href = `/index.html`;
            location.href = `/showFiles.html?path=${file_path}`;
          },

          showLastPage: function () {
            console.log(myvue.genPath)
            location.href = `/lastPage.html?path=${myvue.genPath}`;
          },
        }
      });

      document.getElementById('deleteall').onclick = function () {
        var xmlhr = new XMLHttpRequest();
        var url = '/deleteall.html';

        xmlhr.onreadystatechange = function () {
          if (xmlhr.readyState == 4 && xmlhr.status == 200) {
            myvue.fileslist = [];
            console.log(myvue.fileslist);
          }
        }
        if (xmlhr) {
          xmlhr.open('POST', url, true);
          xmlhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
          xmlhr.send("data=hahah");
        }
      };

      // dropzone
      Dropzone.autoDiscover = false;
      var myDropzone = new Dropzone("div#dropz", {
        url: "/upload.html",
        maxFilesize: 100,
        paramName: "file",
        maxThumbnailFilesize: 5,
        init: function () {
          this.on('success', function () {
            $.post('/index.html', {}, function (fileslist) {
              // body...
              console.log(fileslist);
              myvue.fileslist = fileslist;


            })
          });
        }
      })
    })








